<template>
  <div class="container">
      <process :src='process1'></process>

        <div>
            <apptitle titleName="营业执照"></apptitle>
            <div> 
                <Row>
                    <i-col span='10' offset='3'>
                        <Form :model="formItem" :label-width="200">
                            <!-- <FormItem label="上传营业执照">
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :default-file-list="defaultList"
                                    :on-success="handleSuccess"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleBeforeUpload"
                                    multiple
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:300px;">
                                    <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                                        <Icon type="ios-camera" size="50"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="View Image" v-model="visible">
                                    <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                                </Modal>
                            <p style="width:500px" class="desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</p>
                            </FormItem> -->
                        </Form>
                    </i-col> 
                </Row>
            </div>
        </div>

        <apptitle titleName="认证人信息"></apptitle>
        <div class="marginT20">
            <Row>
                <i-col span='10' offset='3'>
                    <Form :model="formItem" :label-width="200">
                        <FormItem label="请选择您的身份">
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="male">法定代表人</Radio>
                                <Radio label="female">非法定代表人</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="法定代表人姓名">
                            <i-input v-model="formItem.input" placeholder="请填写法定代表人姓名"></i-input>
                        </FormItem>
                        <FormItem label="法定代表人身份证号">
                            <i-input  placeholder="请填写法定代表人身份证号"></i-input>
                        </FormItem>
                        <!-- <FormItem label="法定代表人身份证照片">
                            <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                :before-upload="handleBeforeUpload"
                                multiple
                                type="drag"
                                action="//jsonplaceholder.typicode.com/posts/"
                                style="display: inline-block;width:300px;">
                                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                                    <Icon type="ios-camera" size="50"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                            </Modal>
                        </FormItem> -->
                        <!-- <FormItem>
                            <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                :before-upload="handleBeforeUpload"
                                multiple
                                type="drag"
                                action="//jsonplaceholder.typicode.com/posts/"
                                style="display: inline-block;width:300px;">
                                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                                    <Icon type="ios-camera" size="50"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                            </Modal>
                            <p style="width:600px"><span style="color:#EC0000">注：请您上传清晰、真实的照片，</span><span class="text-center desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</span> </p>
                        </FormItem> -->
                        <FormItem label="账号管理人姓名">
                            <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
                        </FormItem>
                        <FormItem label="称谓">
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="male">法定代表人</Radio>
                                <Radio label="female">非法定代表人</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="账号管理人身份证号">
                            <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
                        </FormItem>
                        <!-- <FormItem label="账号管理人身份证照片">
                            <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                :before-upload="handleBeforeUpload"
                                multiple
                                type="drag"
                                action="//jsonplaceholder.typicode.com/posts/"
                                style="display: inline-block;width:300px;">
                                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                                    <Icon type="ios-camera" size="50"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                            </Modal>
                            
                        </FormItem> -->
                        <!-- <FormItem>
                            <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                :before-upload="handleBeforeUpload"
                                multiple
                                type="drag"
                                action="//jsonplaceholder.typicode.com/posts/"
                                style="display: inline-block;width:300px;">
                                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                                    <Icon type="ios-camera" size="50"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                            </Modal>
                            <p style="width:600px"><span style="color:#EC0000">注：请您上传清晰、真实的照片，</span><span class="text-center desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</span> </p>
                        </FormItem> -->
                        <FormItem label="账号管理人手机号">
                            <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
                        </FormItem>

                        <FormItem label="短信验证码">
                            <Row>
                                <i-col span="18">
                                    <i-input type="text" placeholder="请填写短信验证码"></i-input>
                                </i-col>
                                <i-col span="4" offset="1">
                                    <Button>获取验证码</Button>
                                </i-col>
                            </Row>
                        </FormItem>
                    </Form>
                </i-col> 
            </Row>
        </div>
        <apptitle titleName="企业信息"></apptitle>



        <div class="marginT10">
            <p class="text-center">系统将根据您上传的营业执照自动识别以下信息，识别成功请核对；如因网络原因识别失败，请手动填写</p>
            <Row class="marginT20">
                <i-col span='10' offset='3'>
                    <Form :label-width="200">
                        
                        <FormItem label="企业名称">
                            <i-input v-model="formItem.input" placeholder="请填写企业名称"></i-input>
                        </FormItem>
                        <FormItem label="统一社会信用代码">
                            <i-input  placeholder="请填写统一社会信用代码"></i-input>
                        </FormItem>
                        <FormItem label="注册资本（万）">
                            <i-input v-model="formItem.input" placeholder="请填写注册资本"></i-input>
                        </FormItem>
                        <FormItem label="企业地址">
                            <Cascader :data="data" v-model="value1"></Cascader>
                        </FormItem>
                        <FormItem label="详细地址">
                            <i-input v-model="formItem.input" placeholder="请填写企业详细地址"></i-input>
                        </FormItem>

                    </Form>
                </i-col> 
            </Row>
        </div>
        <div>
            <Row>
                <i-col span='2' offset='8'>
                    <Button @click="next" type="success">下一步</Button>
                </i-col>
                <i-col span='2'>
                    <Button>返回</Button>
                </i-col>
            </Row>
            
        </div>

        
      
  </div>
</template>

<script>
import process1 from '@/assets/images/process1.png'
import process from '@/components/process'
import apptitle from '@/components/title'
export default {
        data () {
            return {
                process1:process1,
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'http://a0.att.hudong.com/64/76/20300001349415131407760417677.jpg'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'http://a0.att.hudong.com/64/76/20300001349415131407760417677.jpg'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: [],
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                },
                value1: [],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙',
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园',
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林',
                                }
                            ]
                        }
                    ],
                }]
            }
        },
        methods: {
            next(){
                this.$router.push({
                    path:'./companyCheck'
                })
            },
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        },
        components:{
            process,
            apptitle
        }
    }
</script>

<style>

</style>